<template>
  <div class="main-content">
    <div style="display: flex; align-items: flex-start; grid-gap: 10px">

<!--      左-->
      <div style="width: 150px" class="card">
        <div class="category-item" :class="{ 'category-item-active': item.name === current }"
             v-for="item in categoryList" :key="item.id" @click="selectCategory(item.name)">{{ item.name }}</div>
      </div>
<!--      中-->
      <div style="flex: 1" >

        <BlogList :categoryName="current" ref="blogListRef"/>

        <Footer />



      </div>

<!--      右-->
      <div style="width: 260px">

        <div class="card" style="margin-bottom: 10px">
          <div style="font-size: 20px; font-weight: bold;margin-bottom: 10px">欢迎你！😊</div>
          <a href="/front/newBlog"><div style="color: #666">写下博客记录美好的一天</div></a>
        </div>

<!--        榜单-->
        <div class="card" style="margin-bottom: 10px">
          <div style="display: flex; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #ddd">
            <div style="font-size: 20px; flex: 1">文章榜单</div>
            <div style="font-size: 12px; color: #666; cursor: pointer;" @click="refreshTop"><i class="el-icon-refresh"></i> 换一换</div>
          </div>
          <div>
            <div v-for="item in showList" :key="item.id" style="margin: 15px 0" class="line1">
              <span style="width: 18px; display: inline-block; text-align: right; margin-right: 10px">
                <span style="color: orangered" v-if="item.index === 1">{{ item.index }}</span>
                <span style="color: goldenrod" v-else-if="item.index === 2">{{ item.index }}</span>
                <span style="color: dodgerblue" v-else-if="item.index === 3">{{ item.index }}</span>
                <span style="color: #666" v-else>{{ item.index }}</span>
              </span>
              <a :href="'/front/blogDetail?blogId=' + item.id" target="_blank"><span class="list-title" >{{ item.title }}</span></a>
            </div>
          </div>
        </div>

        <div v-for="item in topActivityList" :key="item.id" style="margin-bottom: 10px">
          <a :href="'/front/activityDetail?activityId=' + item.id" target="_blank">
            <img :src="item.cover" alt="" style="width: 100%; border-radius: 5px"></a>
        </div>

        <div style="line-height: 30px; color: #666;padding: 0 10px">
          <div>举报邮箱：feedback@gmail.com</div>
          <div>座机电话：0594-2671122</div>
          <div>闽ICP备09004036号</div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>



import Footer from "@/components/Footer.vue";
import BlogList from "@/components/BlogList";

export default {
  components:{
    BlogList,
    Footer
  },

  data() {
    return {
      current: '全部博客',  //当前选中的分类名称
      categoryList: [],

      topList:[],
      showList:[],
      lastIndex: 0,
      topActivityList: []
    }
  },
  mounted() {
    this.load()

    this.refreshTop()

    this.loadTopActivity()

  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    loadTopActivity(){
      this.$request.get('/activity/selectTop').then(res =>{
        this.topActivityList = res.data || []
      })
    },

    //榜单逻辑
    // refreshTop() {
    //   this.$request.get('/blog/selectTop').then(res => {
    //     this.topList = res.data || []
    //     let i = 1
    //     this.topList.forEach(item => item.index = i++)
    //
    //     // 0  5  0
    //     if (this.lastIndex === 20) {
    //       this.lastIndex = 0
    //     }
    //     this.showList = this.topList.slice(this.lastIndex, this.lastIndex+5)  // 0-5   5- 10  // 0-5
    //     this.lastIndex += 5  // 5  10  5
    //   })
    // },

    refreshTop() {
      // 发起 GET 请求，从后端接口获取置顶博客数据
      this.$request.get('/blog/selectTop').then(res => {
        // 将返回的数据赋值给 this.topList，如果没有数据则默认为空数组
        this.topList = res.data || [];
        // 初始化索引变量 i，用于为每项数据添加序号
        let i = 1;
        // 遍历 topList，为每项数据添加一个 index 属性，值从 1 开始递增
        this.topList.forEach(item => item.index = i++);
        // 判断 lastIndex 的值，如果等于 20，则重置为 0
        // lastIndex 用于控制显示的分段，可能是分页或分段显示的逻辑
        if (this.lastIndex === 20) {
          this.lastIndex = 0;
        }
        // 根据 lastIndex 的值，从 topList 中截取一段数据赋值给 showList
        // 例如：lastIndex = 0，截取 topList 的前 5 项；lastIndex = 5，截取第 6 到第 10 项
        this.showList = this.topList.slice(this.lastIndex, this.lastIndex + 5);
        // lastIndex 自增 5，为下一次刷新做准备
        this.lastIndex += 5;
      });
    },

    selectCategory(categoryName) {
      this.current = categoryName

    },
    load() {
      // 请求分类的数据
      this.$request.get('/category/selectAll').then(res => {
        this.categoryList = res.data || []
        this.categoryList.unshift({ name: '全部博客' })
      })
    },


  }
}
</script>

<style>
.category-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
}
.category-item-active {
  background-color: #1890ff;
  color: #fff;
  border-radius: 5px;
}
.list-title {
  margin-bottom: 5px;
  color: #666;
}
.list-title:hover {
  color: #2a60c9;
}



</style>
